<template>
    <div class="home">
        <div class="part3 part">
            <header class="h1x">
                &nbsp;|房屋状态
            </header>
            <article>
                <circleChartVue></circleChartVue>
            </article>
        </div>
        <div class="part2 part">
            <header class="h1x">
                &nbsp;|订单状态
            </header>
            <article>
                <barchart style="width:100%;height:100%;"></barchart>
            </article>
        </div>
        <div class="part3 part">
            <header class="h1x">
                &nbsp;|用户状态
            </header>
            <article>
                <pchart></pchart>
            </article>
        </div>
    </div>
</template>

<script>
    import circleChartVue from '../components/encharts/circleChart';
    import pchart from '../components/encharts/pchart';
    import barchart from '../components/encharts/barchart';
    export default {
        name: "home",
        components:{
            circleChartVue,
            pchart,
            barchart,
        },
        data(){
            return{
                condition:{
                    phone:'',
                    username:'',
                    state:1,
                    payment:'',
                },
                condition2:{
                    phone:'',
                    username:'',
                    state:0,
                    payment:'',
                },
                per1:null,
                per2:null,
                count1:null,
                count2:null,
                currentPage:1,
                displayCount:1000,

            }

        },
        mounted() {
        },
        methods:{
        }
    }
</script>

<style scoped>
    .home{
        width: 100%;
        height: 100%;
        display:flex;
        background-color: rgb(235, 233, 233);
    }
    .home .article{
        padding:5px;
    }
    .home .h1x{
        padding: 0;
        margin:0;
        width: 100%;
        text-align: left;
        font-size: 20px;
        color: rgb(84, 84, 84);
    }
    .part{
        width: 100%;
        background-color: #ffffff;
        border-radius: 5px;
        padding: 10px;
    }
    .p1-l,.p1-r{
        flex: 1;
        text-align: center;
        margin: 40px;
    }
    .p1-l span,.p1-r span{
        font-size: 10px;
        color: rgb(84, 84, 84);
    }
    .part2 article{
        display: flex;
        flex-direction: column;
    }
    .p2{
        flex: 1;
        text-align: center;
        display: flex;
        flex-direction: column;
        padding: 4px;
    }
    .p2 span{
        font-size: 10px;
        color: rgb(84, 84, 84);
    }
    .part2 article{
        display: flex;
        flex-direction: row;
        overflow: hidden;
    }

</style>